<template>
    <div class="home-btn-container" @click="toComicList">
        <div class="btn">
            <img :src="message.thumb.fileServer + message.thumb.path" class="img-container">
            <div class="text-container">{{ message.title }}</div>
        </div>
    </div>
</template>

<script>

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "homeBtn",
    data() {


        return {
            imgPath: ''
        }
    },
    props: ["message"],
    setup() {
        let cantLoadImg = {
            '嗶咔小禮物':'../../../../img/1.jpg',
            '嗶咔畫廊':'../../../../img/1.jpg',
            '被褐懷玉':'../../../../img/1.jpg',
        }

        function toComicList() {
            alert("功能暂未上线，敬请期待")
        }

        return {
            toComicList,
            cantLoadImg
        }
    }
}
</script>

<style scoped>
.home-btn-container {
    height: 140px;
    width: calc(33.3% - 10px);
    padding: 5px;
}

.btn {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    padding: 5px;
    background-color: white;
    border-radius: 5px;
}

.img-container {
    width: 100%;
    height: 80%;
    border-radius: 3px;
}

.text-container {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1929d;
}
</style>